<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				position: relative;
				margin: 30px 200px;
			}	
			#raffle{
				width: inherit;
				height: inherit;
				position: absolute;
				top: 0;
				left: 0;
			}
			#raffle1{
				position: absolute;
				width: 180px;
				height: 180px;
				top:60px;
				left: 60px;
			}
			
			
		</style>
	</head>
	<body>
		
		<div class="box">
			<img id="raffle" src="img/raffle/raffle.png">
			<img id="raffle1" src="img/raffle/raffle1.png" />
		</div>
		
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/jquery.rotate.min.js" ></script>
		<script type="text/javascript" src="js/jquery.easing.min.js" ></script>
		<script type="text/javascript">
			$("#raffle1").click(function(){
				var r = Math.random()*360;
				$("#raffle").rotate({
					angle:0,
					animateTo:3600+r,
					duration:10000,
					easing:$.easing.easeOutBounce,
					callback:function(){
						if(r>=90&&r<=135){
							alert("恭喜您中了二等奖！");
						}else if(r>=180 && r<=225){
							alert("恭喜您中了一等奖！");
						}else if(r>=315 && r<=360){
							alert("恭喜您中了三等奖！");
						}else{
							alert("再接再厉！");
						}
					}
				});
			});
			
			
		</script>
	</body>
</html>
